<template>
  <div class="app-container">
    <div class="wise-crud">
      <div class="table-show">
        <div class="operation-block">
          <el-row class="oper-btn" :gutter="10">
            <el-col :span="16">
              <el-button type="primary" @click="handleDialog('add')"><i class="el-icon-plus" />添加</el-button>
            </el-col>
            <el-col :span="8" class="text-right">
              <el-input v-model="search.key" placeholder="请输入姓名" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="getTableData" />
              </el-input>
            </el-col>
          </el-row>
        </div>
        <div class="wise-table">
          <el-table :data="tableData" border highlight-current-row>
            <el-table-column type="index" width="50" />
            <!--            <el-table-column v-if="checkPermission(['superSysOpsAdmin'])" label="所属项目">-->
            <!--              <template slot-scope="scope">-->
            <!--                {{ scope.row.spaceInfo.name }}-->
            <!--              </template>-->
            <!--            </el-table-column>-->
            <el-table-column label="头像" width="120">
              <template slot-scope="scope"  >
                <template v-if="scope.row.userInfo">
                  <el-image style="width: 50px; height: 50px" :src="scope.row.userInfo.picture | imgPath" fit="cover">
                    <div slot="error" class="image-slot">
                      <img src="~@/assets/img/default.png" style="width: 100%; height: 100%">
                    </div>
                  </el-image>
                </template>
              </template>
            </el-table-column>
            <el-table-column label="姓名"  width="150">
              <template slot-scope="scope">
                <template v-if="scope.row.userInfo">
                  {{ scope.row.userInfo.username }}
                </template>
              </template>
            </el-table-column>
            <el-table-column label="联系电话"  width="250">
              <template slot-scope="scope">
                <template v-if="scope.row.userInfo">
                  {{ scope.row.userInfo.phone }}
                </template>
              </template>
            </el-table-column>
            <el-table-column label="人员编号">
              <template slot-scope="scope">
                <template v-if="scope.row.userInfo">
                  {{ scope.row.userInfo.serialNum }}  
 
                </template>
              </template>
            </el-table-column>
           
            <el-table-column label="人员类型">
              <template slot-scope="scope">
                <template v-if="scope.row.userInfo">
                  {{
                    scope.row.userInfo.workCode === "ZSG" ? "正式工" : "临时工"
                  }}
                </template>
              </template>
            </el-table-column>
            <el-table-column label="操作" style="width: 500px;">
              <template slot-scope="scope">
                <!-- <el-button
                  type="primary"
                  size="small"
                  round
                  @click.native.prevent="setDeptHandle(scope.row)"
                  >设置</el-button
                > -->
                <el-button v-if="scope.row.userInfo.workCode !== 'ZSG'" type="info" size="small" round
                  @click.native.prevent="
                    handleDialog('edit', scope.row.userInfo.id)
                  ">信息编辑</el-button>
                <el-button type="danger" size="small" round @click.native.prevent="removeHandle(scope.row)">移除
                </el-button>
                <el-button type="warning" size="small" class="activeBtn" round
                  @click.native.prevent="initHandle(scope.row)">重置密码</el-button>
                  <el-button type="warning" size="small" class="activeBtn" round
                  @click.native.prevent="dayinCode(scope.row)">打印编码</el-button>

              </template>
            </el-table-column>
          </el-table>
          <div class="page-block">
            <pagination :background="true" layout="total,prev, pager, next" :total="ts" :page.sync="page.p"
              :limit.sync="page.ps" @pagination="getTableData" />
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="打印" :visible.sync="drawerx" width="20%">
      <div id="printMeD" style="height: 400px;">
   
              <canvas ref="qrcodeCanvas"></canvas>
      <br/>
        <label style="width: 196px; text-align: center; margin-left: 70px;"> {{ name }}</label>
        </div>
       
 
     
      <div slot="footer" class="dialog-footer">
 
        <el-button v-print="{
            id: 'printMeD',
            popTitle: ''
          }" type="primary">打印</el-button>
      </div>
    </el-dialog>
    <UserDialog ref="userDialog" @getList="getTableData" />
    <DeptDialog ref="deptDialog" @getList="getTableData" />
  </div>
</template>

<script>
//const wewin = require("npm-wewin-print-demo");
  import {
    postHandle
  } from '@/api'
  import Pagination from '@/components/Pagination/index'
  import {
    imgPath
  } from '@/filters'
  import checkPermission from '../../utils/permission'
  import UserDialog from './components/userDialog'
  import DeptDialog from './components/deptDialog'
  import QRCode from 'qrcode'
  export default {
    name: 'MemberManage',
    components: {
      Pagination,
      UserDialog,
      DeptDialog
    },
    data() {
      return {
       
        searchUserName: '',
        search: {
          key: '',
          fields: ['name']
        },
        drawerx:false,
        tableData: [],
        page: {
          p: 1,
          ps: 10
        },
        ts: 0,

        filterMethod(query, item) {
          return item.name.indexOf(query) > -1
        },
        loading: false,
        cedex:"",
            name:"",
            xingbie:"",
            dianhua:"",
            xuexing:"",
            bumen:"",
            zhiwu:""
      }
    },

    computed: {
      spaceId() {
        return this.$store.state.project.spaceId
      }
    },
    created() {
      this.getTableData()
    },
    methods: {
      checkPermission,
      initHandle(row) {
        this.$confirm('您确定要重置该用户的密码?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            postHandle(
                '/api/v1/welder-uac-second/user-account-comb/init-password/' + row.userId, {}
              )
              .then((res) => {
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                })
              })
              .catch(() => {
                this.$message({
                  type: 'error',
                  message: '操作失败'
                })
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      dayinCode(row){
        this.drawerx=true;
        this.cedex=row.userInfo.serialNum,
        this. name=row.userInfo.username,
        this. xingbie=row.userInfo.sex,
        this.  dianhua=row.userInfo.phone,
        this.  xuexing=row.userInfo.nation

        if(typeof(  this.  xuexing)=="undefined"){
            this.  xuexing="";
        }
        this.  bumen=row.userInfo.address
        if(typeof(  this.  bumen)=="undefined"){
            this.  bumen="";
        }
        this.   zhiwu=row.userInfo.wechat
        if(typeof(  this.  zhiwu)=="undefined"){
            this.  zhiwu="";
        }
        this.generateQRCode('编号:'+this.cedex+';姓名:'+this.name+';电话:'+this.dianhua+';性别:'+this.xingbie+';血型:'+this.xuexing+';部门:'+this.bumen+';职务:'+this.zhiwu+';')
 

         
      // var xml =
      //   '<?xml version="1.0" encoding="utf-8" ?><Data><Print><EntityTypeId>123</EntityTypeId> <Code>123456789</Code><Code>123456789</Code></Print></Data>';
      // wewin.Print(xml, {
      //   imgPath: "imgs"
      // });
            // label: '血型',
            // prop: 'nation',
            // label: '职务',
            // prop: 'wechat',
        
            // label: '部门',
            // prop: 'address',


 
      
    
         
      },
      generateQRCode(text) {
      this.$nextTick(() => {
        const canvas = this.$refs.qrcodeCanvas
        QRCode.toCanvas(canvas, text, function (error) {
        if (error) {
          console.error(error)
        }
      })
      })},
      handleDialog(type, id) {
        this.$nextTick(() => {
          this.$refs.userDialog.open(type, id)
        })
      },
      setDeptHandle(row) {
        this.$nextTick(() => {
          this.$refs.deptDialog.settingHandle(row)
        })
      },

      getTableData() {
        const req = {
          d: {
            fields: [{
              name: 'professionList'
            }],
            filters: [{
              field: 'spaceId',
              operator: 'EQUALS',
              value: this.spaceId
            }],
            page: this.page,
            search: this.search,
            retPage: true
          },
          // obj: {
          //   username: this.searchUserName
          // }
        }
        postHandle(
          '/api/v1/welder-sbtx-second/space-comb/get-member-list',
          req
        ).then((response) => {
          this.tableData = response.result
          this.ts = response.page.ts
        })
      },

      removeHandle(row) {
        this.$confirm('您确定要移除该成员, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            this.deleteObjectById(row.id)
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消移除'
            })
          })
      },

      deleteObjectById(id) {
        postHandle(
            '/api/v1/welder-uac-second/space-organization-member-comb/remove-member/' + id, {}
          )
          .then((response) => {
            this.getTableData()
            this.$message({
              type: 'success',
              message: '修改成功!'
            })
          })
          .catch((error) => {
            this.loading = false
            const data = error.response.data
            for (const key in data) {
              this.$message.error(this.$t(data[key]))
            }
          })
      },

      switchShow(id){
        postHandle(
            'hapi/v1/welder-sbtx-second/space-comb/updateShow/' + id, {}
          )
          .then((response) => {
            this.getTableData()
            this.$message({
              type: 'success',
              message: '修改成功!'
            })
          })
          .catch((error) => {
            this.loading = false
            const data = error.response.data
            for (const key in data) {
              this.$message.error(this.$t(data[key]))
            }
          })
      },
      switchHandle(id,sw){
        
        if(sw==1){
          postHandle(
            '/api/v1/welder-sbtx-second/space-comb/updateShow/' + id, {}
          )
          .then((response) => {
            this.getTableData()
            this.$message({
              type: 'success',
              message: '移除成功!'
            })
          })
          .catch((error) => {
            this.loading = false
            const data = error.response.data
            for (const key in data) {
              this.$message.error(this.$t(data[key]))
            }
          })
        }else{
          postHandle(
            '/api/v1/welder-sbtx-second/space-comb/updateHandle/' + id, {}
          )
          .then((response) => {
            this.getTableData()
            this.$message({
              type: 'success',
              message: '移除成功!'
            })
          })
          .catch((error) => {
            this.loading = false
            const data = error.response.data
            for (const key in data) {
              this.$message.error(this.$t(data[key]))
            }
          })
        }
        
      }
    }
  }
</script>

<style>
  .el-transfer .el-checkbox {
    display: block;
  }
</style>